<template>
  <div class="my-company">
    <el-button type="primary" size="small" class="btn" @click="handleAdd()"
      >我的公司新增</el-button
    >
    <div class="table_">
      <el-table border :data="tableData">
        <el-table-column prop="name" label="公司名称"> </el-table-column>
        <el-table-column prop="invoicTypeName" label="开票类型">
        </el-table-column>
        <el-table-column prop="currencyName" label="结算币种">
        </el-table-column>
        <el-table-column prop="state" label="审批状态">
          <!-- <div slot-scope="scope" :style="{ color: scope.row.state == 100 ? 'yellow' : scope.row.state == 200 ? 'green' : 'red' }">{{scope.row.state == 100 ? "待审核": scope.row.state == 200 ? "审核通过" : scope.row.state == 300 ? "审核拒绝" : ""}}</div> -->
          <!-- <div slot-scope="scope">
            <span v-if="scope.row.state == 100" style="color: #f7b500"
              >待审核</span
            >
            <span v-else-if="scope.row.state == 200" style="color: #6dd400"
              >审核通过</span
            >
            <span v-else-if="scope.row.state == 300" style="color: #e02020"
              >审核拒绝</span
            >
          </div> -->
          <template slot-scope="scope">
            <el-popover
              width="200"
              trigger="hover"
              placement="top"
              v-model="scope.row.showTooltip"
              :open-delay="500"
              v-if="scope.row.cause"
            >
              <div>{{ scope.row.cause }}</div>
              <div
                slot="reference"
                @mouseenter="showTips($event, scope.row)"
                class="myNote"
              >
                <div v-if="scope.row.state == 100" class="iconItem">
                  <span class="color1"></span>
                  <span>待审核</span>
                </div>

                <div v-if="scope.row.state == 200" class="iconItem">
                  <span class="color2"></span>
                  <span>审核通过</span>
                </div>

                <div v-if="scope.row.state == 300" class="iconItem">
                  <span class="color3"></span>
                  <span>审核拒绝</span>
                </div>
              </div>
            </el-popover>
            <span v-else>
              <div v-if="scope.row.state == 100" class="iconItem">
                <span class="color1"></span>
                <span>待审核</span>
              </div>

              <div v-if="scope.row.state == 200" class="iconItem">
                <span class="color2"></span>
                <span>审核通过</span>
              </div>

              <div v-if="scope.row.state == 300" class="iconItem">
                <span class="color3"></span>
                <span>审核拒绝</span>
              </div>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-button type="text" @click="handleSee(scope.row)"
                ><span>查看</span></el-button
              >
              <el-button type="text" @click="handleEdit(scope.row)">
                <span v-if="scope.row.state == 200 || scope.row.state == 300">
                  编辑
                </span>
                <span v-else class="zwf">占位</span>
              </el-button>
              <el-button
                type="text"
                @click="handleStopUse(scope.row.relationEnterpriseId)"
                >
                  <span v-if="scope.row.mainCompany != 1">删除</span>
                  <span v-else class="zwf">占位</span>
                </el-button
              >
            </div>
          </template>
        </el-table-column>

        <template slot="empty">
          <img
            src="../../../assets/images/noneData.svg"
            alt=""
            class="nullDataImg"
          />
        </template>
      </el-table>
      <Pagination
        v-show="total > 0"
        :total.sync="total"
        :page.sync="page"
        :limit.sync="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        @pagination="handleCompanyList()"
        layout=" total,sizes,prev, pager, next, jumper"
      ></Pagination>
    </div>
    <!-- 停用 -->
    <el-dialog
      title="title"
      :visible.sync="stopDialogVisible"
      :show-close="false"
      center
      class="reset-dialog-header"
    >
      <div slot="title" class="reset-dialog-icon">
        <i class="el-icon-remove-outline"></i>
      </div>
      <h1>您确认删除该公司吗？</h1>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleStop(relationId)"
          >确 定</el-button
        >
        <el-button @click="stopDialogVisible = false" class="resletBtn">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { mapGetters } from "vuex";
import { companyList, companyStop } from "@/api/myCompany.js";
export default {
  name: "myCompany",
  data() {
    return {
      tableData: [],
      stopDialogVisible: false,
      total: 0,
      page: 1,
      pageSize: 20,
      relationId: "",
    };
  },
  components: {
    Pagination,
  },
  mounted() {
    this.handleCompanyList();
  },
  computed: {
    // ...mapGetters([
    //   "fatherId",
    // ]),
  },
  methods: {
    showTips(obj, row) {
      /*obj为鼠标移入时的事件对象*/

      /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
      let TemporaryTag = document.createElement("span");
      TemporaryTag.innerText = row.remark;
      TemporaryTag.className = "getTextWidth";
      document.querySelector("body").appendChild(TemporaryTag);
      let currentWidth = document.querySelector(".getTextWidth").offsetWidth;
      document.querySelector(".getTextWidth").remove();

      /*cellWidth为表格容器的宽度*/
      const cellWidth = obj.target.offsetWidth;
      /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
      currentWidth <= 2 * cellWidth
        ? (row.showTooltip = false)
        : (row.showTooltip = true);
      row.showTooltip = true;
    },
    // 获取公司列表
    handleCompanyList() {
      companyList({ page: this.page, pageSize: this.pageSize })
        .then((res) => {
          if (res.code == 200) {
            this.total = res.result.total;
            this.tableData = res.result.list || [];
            this.tableData.forEach((item) => {
              item.showTooltip = false;
            });
          } else {
            this.total = 0;
            this.tableData = [];
          }
        })
        .catch(() => {
          this.total = 0;
          this.tableData = [];
        });
    },
    // 查看
    handleSee({ relationEnterpriseId }) {
      this.$router.push({ path: "/see", query: { relationEnterpriseId } });
    },
    // 编辑
    handleEdit(row) {
      let path = "/edit";
      if (row.state == 200) {
        path = "/edit";
      }
      if (row.state == 300) {
        path = "/edit2";
      }
      this.$router.push({
        path,
        query: {
          relationEnterpriseId: row.relationEnterpriseId,
          id: row.id,
          type: row.state,
        },
      });
    },
    // 新增
    handleAdd() {
      sessionStorage.setItem("ruleForm", "");
      this.$router.push("/add");
    },
    // 删除
    handleStopUse(id) {
      this.relationId = id;
      this.stopDialogVisible = true;
    },
    handleStop(id) {
      companyStop({ relationEnterpriseId: id }).then((res) => {
        this.stopDialogVisible = false;
        this.handleCompanyList();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-company {
  height: calc(100% - 39px);
  .btn {
    margin: 15px 0px;
  }
  .table_ {
    height: calc(100% - 28px);
    .iconItem {
      display: flex;
      align-items: center;
      span:first-child {
        width: 5px;
        height: 5px;
        margin-right: 7px;
        border-radius: 50%;
      }
      span.color1 {
        background: #f7b500;
      }
      span.color2 {
        background: #6dd400;
      }
      span.color3 {
        background: #e02020;
      }
    }
    .el-table {
      height: calc(100% - 74px);
    }
    .el-table__body-wrapper {
      height: calc(100% - 33px);
      overflow-y: scroll;
    }
    .el-button + .el-button {
      margin: 0;
    }
    .zwf {
      opacity: 0;
    }
    // .el-table--border th .cell {
    //   padding-left: 24px !important;
    //   box-sizing: border-box;
    // }
    // .el-table
    //   .el-table__body-wrapper
    //   .el-table__body
    //   .el-table__row
    //   td
    //   > .cell {
    //   padding-left: 30px !important;
    // }
  }
}
// 弹框 - 重置密码
.reset-dialog-header {
  ::v-deep .el-dialog {
    width: 430px;
    .el-dialog__header::after {
      display: none;
    }
    .el-dialog__header {
      height: 100px;
      position: relative;
      border: 0 !important;
      .reset-dialog-icon {
        font-size: 65px;
        position: absolute;
        left: 50%;
        top: 34%;
        margin-left: -33px;
        i {
          color: #2348e8;
        }
      }
    }
    .el-dialog__body {
      padding: 0 0 20px;
      box-sizing: border-box;
      .words {
        text-align: center;
        color: #666666;
        font-size: 14px;
      }
      h1 {
        font-size: 24px;
        font-weight: 600;
        color: #333333;
        text-align: center;
      }
    }
  }
}
</style>